<template>
    <div class="header">
        <div class="header_content">
            <div class="header_content_left">
                <img src="@/assets/202306090204-51f4.png" alt="">
                <div class="nav">
                    <a v-for="(item, index) in navTitle" :key="index">
                        {{ item.title }}
                    </a>
                </div>
            </div>
            <div class="header_content_right">
                <div class="menu">
                    <div class="menu-item">
                        <CirclePlusFilled style="width: 24px; height: 24px" />
                    </div>
                    <div class="menu-item">
                        <Menu style="width: 24px; height: 24px;" />
                    </div>
                </div>

                <div class="btn" @click="isLogin = true">登陆/注册</div>
            </div>
        </div>
    </div>
    <el-dialog v-model="isLogin" style="border-radius: 20px;" width="500px">
        <el-form class="login_form" :model="loginForm" :rules="formRule" ref="formRef">
            <el-form-item prop="username">
                <el-input v-model="loginForm.username" style="height: 40px;width: 85%;margin: 0 auto;border-radius: 20px;" />
            </el-form-item>
            <el-form-item prop="password">
                <el-input type="password" :prefix-icon="Lock" v-model="loginForm.password" show-password style="height: 40px;width: 85%;margin: 0 auto;" ></el-input>
            </el-form-item>
            <el-form-item>
                <el-button :loading="loading" type="primary" class="login_btn" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { Menu, CirclePlusFilled } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
const isLogin = ref(false)
const loginForm = reactive({
    username:'',
    password:''
})
const navTitle = reactive([
    {
        title: '发现',
        path: ''
    },
    {
        title: '素材',
        path: ''
    },
    {
        title: '咨询',
        path: ''
    }
])
</script>

<style lang="scss" scoped>
.el-input {
    --el-input-border-radius:12px;
    --el-input-focus-border-color:red;
}
.header {
    background-color: rgba(0, 0, 0, 0);
    position: flex;
    top: 0;
    left: 0;
    width: 100%;

    .header_content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 24px;
        height: 60px;

        .header_content_left {
            align-items: center;
            display: flex;

            img {
                width: 24px;
                height: 24px;
                cursor: pointer;
            }

            .nav {
                margin-left: 16px;

                a {
                    color: $fontColor;
                    margin: 0 8px;
                    font-weight: 700;
                    cursor: pointer
                }

                a:hover {
                    color: rgba(30, 32, 35, .65)
                }
            }

        }

        .header_content_right {
            align-items: center;
            display: flex;

            .menu {
                margin-right: 8px;
                display: flex;

                .menu-item {
                    padding: 8px;
                    cursor: pointer;

                }

                .menu-item:hover {
                    background: rgb(238, 238, 238);
                    border-radius: 8px;
                }
            }


            .btn {
                display: flex;
                justify-content: center;
                align-items: center;
                width: 94px;
                height: 40px;
                box-sizing: border-box;
                border-radius: 20px;
                background-color: #ff5967;
                color: #fff;
                cursor: pointer;
                font-size: 14px;
            }
        }
    }
}
</style>